<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation
			:scroll-into-view="scrollInto">
			<view class="pagecontrol-top-title">
				<view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text"
					@click="changeTab(index)" :id="'tab' + index">
					<view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">
						{{items}}
					</view>
					<view class="pagecontrol-bottom-line"
						:class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'">
					</view>
				</view>
				<view class="pagecontrol-top-text" @click="goTransportTrack">
				    <view class="pagecontrol-top-normal">运输跟踪</view>
				    <view class="pagecontrol-bottom-line pagecontrol-bottom-line-visibility"></view>
				</view>
				<view v-if="openMore" @click="openToggle" hover-class="buttonHover"
					style="display: flex;justify-content: center;color: #eb884c;padding-top: 4px;background-color: #eeeeee;height: 26px;width: 62px;">
					更多<view style="background: url('../../../static/waybill/bottom.png') no-repeat;background-size: cover;width: 20px;height: 20px;"></view>
				</view>
				<view v-else @click="closeToggle" hover-class="buttonHover"
					style="display: flex;justify-content: center;color: #eb884c;padding-top: 4px;background-color: #eeeeee;height: 26px;width: 62px;">
					更多<view style="background: url('../../../static/waybill/bottom.png') no-repeat;background-size: cover;width: 20px;height: 20px;"></view>
				</view>
			</view>

		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
			<swiper-item v-for="(item_, index_) in itemsArr" :key="index_">
				<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<view v-if="index_==0" style="padding-bottom: 130px;">
						<!--车次信息-->
						<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
							<view style="display: flex;justify-content: space-between;">
								<view>发车批次：{{dispatchCarDetails?dispatchCarDetails.scheduleNo:'无'}}</view>
								<!-- <view @click="editDispatch" hover-class="buttonHover" style="color: #eb884c;">编辑</view> -->
								<text style="color: #eb884c;margin-right: 5px;">{{scheduleStatus[dispatchCarDetails.flowStatus]}}</text>
							</view>
							<view>{{dispatchCarDetails.driverVo.driverName}}/{{dispatchCarDetails.driverVo.phoneNumber}}
							</view>
							<view>车牌号：{{dispatchCarDetails.carVo.licensePlate}}</view>
							<view style="display: flex;">
								<!-- <text
									style="background-color: #6699ff;color: #ffffff;padding: 2px 5px;border-radius: 6px;">{{headType[dispatchCarDetails.carVo.headType]}}</text> -->
								<text
									style="background-color: #00cc99;color: #ffffff;padding: 2px 5px;border-radius: 6px;">{{carType_[dispatchCarDetails.carVo.carType]}}{{dispatchCarDetails.carVo.carLength}}米</text>
								<text
									style="background-color: #0099ff;color: #ffffff;padding: 2px 5px;border-radius: 6px;margin-left: 5px;">{{dispatchCarDetails.carVo.loadCapacity}}吨{{dispatchCarDetails.carVo.volume}}立方米</text>
							</view>
							<!-- <text>车辆定位:</text> -->
							<view>发车点：{{formData.shipDistrictName}}{{formData.shipAddress}}</view>
							<view>
								运输线路：
								<!-- <text v-for="(item__,index__) in dispatchCarDetails.lineVo.stationList"
									:key="index__">{{item__.branchDept.deptName}}→</text> -->
								<text>{{dispatchCarDetails.lineVo?dispatchCarDetails.lineVo.lineName:'无'}}</text>
							</view>
							<view>目的地：{{formData.deliveryDistrictName}}{{formData.deliveryAddress}}</view>
							<view>计划提货时间：{{dispatchCarDetails.estPickupTime||'无'}}</view>
							<!-- <view>计划发车时间：{{formData.estDepartTime}}</view> -->
							<view>计划到达时间：{{dispatchCarDetails.estArriveTime||'无'}}</view>
							<view>押运人：{{dispatchCarDetails.escortor||'无'}}</view>
							<view>押运人电话：{{dispatchCarDetails.escortorPhone||'无'}}</view>
							<view>押运人证件：{{dispatchCarDetails.escortorIdcard||'无'}}</view>
						</view>
						<!--运单信息-->
						<view  style="display: flex;border-radius: 12px;background-color: #ffffff;margin: 10px;justify-content: space-between;">
							<view style="padding: 15px;width:100%;">
								<view style="display: flex;justify-content: space-between;">
									<span>
										<text>{{formData.outCode}}</text>
										<!-- <text style="margin-left: 10px;">{{waybillType[formData.waybillType]}}</text> -->
										<!-- <text style="margin-left: 10px;border: 1px solid #eb884c;text-align: center;color: #eb884c;">转</text> -->
									</span>
									<text v-if="formData.status=='101'" style="color: #0099ff;">草稿</text>
									<text style="color: #eb884c;">{{status[formData.status]}}</text>
								</view>
								<view style="display: flex;justify-content: space-between;color: #6f6f6f;">
									<span style="display: flex;flex-direction: column;">
										<text>{{formData.shipName}}</text>
										<text style="font-weight: bold;">{{formData.shipDistrictName}}</text>
									</span>
									<text style="display: flex;align-items: center;">→</text>
									<span style="display: flex;flex-direction: column;">
										<text>{{formData.deliveryName}}</text>
										<text style="font-weight: bold;">{{formData.deliveryDistrictName}}</text>
									</span>
								</view>
								<view v-for="(item___,index___) in formData.goodSourceList" :key="index___"
									style="display: flex;font-size: 12px;margin: 5px 0;">
									<text
										style="background-color: #6699ff;color: #ffffff;padding: 2px 5px;border-radius: 6px;">{{item___.goodsName}}</text>
									<text
										style="background-color: #00cc99;color: #ffffff;padding: 2px 5px;border-radius: 6px;margin-left: 5px;">{{item___.num}}件{{item___.weight}}吨 {{item___.bulk}}立方米</text>
								</view>
								<view style="display: flex;justify-content: space-between;font-size: 13px;">
									<span style="display: flex;flex-direction: column;text-align: center;">
										<text>计划提货时间:</text>
										<text>{{formData.shipPlanTime}}</text>
									</span>
									<span style="display: flex;flex-direction: column;text-align: center;">
										<text>计划到达时间:</text>
										<text>{{formData.deliveryPlanTime}}</text>
									</span>
								</view>
							</view>
							<!--下一运单信息-->
							<view @click="switchWaybill" style="width: 30px;background-color: #e3e1e2;border-radius: 0 12px 12px 0;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;">
								<view style="background-color: #0099ff;color: #ffffff;border-radius: 50%;display: flex;justify-content: center;align-items: center;width: 18px;height: 18px;position: absolute;top: 0;">
									{{whatWaybill_index+1}}
								</view>
								<view>
									<uni-icons type="forward" color="#bf6006" size="20"></uni-icons>
								</view>
								<view style="background-color: #bf6006;color: #ffffff;border-radius: 50%;display: flex;justify-content: center;align-items: center;width: 18px;height: 18px;position: absolute;bottom: 0;">
									{{dispatchCarDetails.waybillList?dispatchCarDetails.waybillList.length:0}}
								</view>
							</view>
						</view>
						<!--底部按钮组-->
						<!--提货&调度-->
						<!--待提货(111)-->
						<view v-if="formData.status==111"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
								<view  @click="completePick" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									开始提货</view>
							</view>
							<!-- <view
								style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
								<view v-if="formData.scheduleStatus=='0'||formData.scheduleStatus=='440'" @click="completeDispatch" hover-class="buttonHover"
									style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									车辆调度</view>
								<view v-else @click="cancelDispatch" hover-class="buttonHover"
									style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消调度</view>
							</view> -->
						</view>
						<!--提货&调度&装车-->
						<!--(提货完成)待装车(120)-->
						<!-- <view v-if="formData.status==120"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
								<view @click="truckLoading" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									装车</view>
							</view>
						</view> -->
						<!--取消装车&发车-->
						<!--(提货中)待发车(130)-->
						<view v-else-if="formData.status==120"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
								<!-- <view @click="cancleTruckLoading" hover-class="buttonHover"
									style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消装车</view> -->
								<view @click="canclePick" hover-class="buttonHover"
									style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消提货</view>
							</view>
							<view
								style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
								<view @click="depart" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									发车</view>
							</view>
						</view>
						<!--取消发车&到达-->
						<!--(已发车)在途中(140)-->
						<view v-else-if="formData.status==140"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
								<view @click="cancleDepart" hover-class="buttonHover"
									style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消发车</view>
								<!-- <view  @click="dispatch" hover-class="buttonHover"
													style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
													发车</view> -->
							</view>
							<view
								style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
								<view @click="arrive" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									到达</view>
							</view>
						</view>
						<!--取消发车&到达-->
						<!--中转(160)-->
						<view v-else-if="formData.status==160"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 33%;height: 60px;justify-content: center;">
								<view @click="depart" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									发车</view>
								<!-- <view @click="cancleDispatch" hover-class="buttonHover"
													style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 110px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
													取消发车</view> -->
							</view>
							<view
								style="display: flex;align-items: center;width: 33%;height: 60px;justify-content: center;">
								<view @click="unload" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									卸车</view>
							</view>
							<view
								style="display: flex;align-items: center;width: 33%;height: 60px;justify-content: center;">
								<view @click="cancleArrive" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消到达</view>

								<!-- <view @click="arrive" hover-class="buttonHover"
													style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
													到达</view> -->
							</view>
						</view>
						<!--取消发车&到达-->
						<!--短驳(170)-->
						<view v-else-if="formData.status==170"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 33%;height: 60px;justify-content: center;">
								<view @click="depart" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									发车</view>
								<!-- <view @click="cancleDispatch" hover-class="buttonHover"
													style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 110px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
													取消发车</view> -->
							</view>
							<view
								style="display: flex;align-items: center;width: 33%;height: 60px;justify-content: center;">
								<view @click="unload" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									卸车</view>
							</view>
							<view
								style="display: flex;align-items: center;width: 33%;height: 60px;justify-content: center;">
								<view @click="cancleArrive" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消到达</view>

								<!-- <view @click="arrive" hover-class="buttonHover"
													style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
													到达</view> -->
							</view>
						</view>
						<!--取消到达&配送-->
						<!--到达(180)-->
						<view v-else-if="formData.status==180"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
								<view @click="cancleArrive" hover-class="buttonHover"
									style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消到达</view>
								<!-- <view @click="signIn" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									签收</view> -->
								
							</view>
							<!-- <view
								style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
								<view v-if="formData.unLoadId=='0'" @click="unload" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									卸车</view>
								<view v-else @click="cancelUnload" hover-class="buttonHover"
									style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消卸车</view>
									
								<view  @click="uploadReceipt" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									<span v-if="formData.receiptAttachments==null||formData.receiptAttachments==''">上传回单</span>
									<span v-else>重新上传</span>
								</view>
								
								<view @click="agency" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									代收贷款</view>
								
								
								<view @click="salesReturn" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									退货</view>
							</view> -->
						</view>
						<!--取消到达&配送-->
						<!--签收(200)-->
						<!-- <view v-else-if="formData.status==200"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
								<view @click="cancelSignIn" hover-class="buttonHover"
									style="height: 30px;border:1px solid #bf5f09;color: #bf5f09;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									取消签收</view>
									
								<view @click="completeWaybill" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									完成运单</view>
								
							</view>
							<view
								style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
								<view  @click="uploadReceipt" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									<span v-if="formData.receiptAttachments==null||formData.receiptAttachments==''">上传回单</span>
									<span v-else>重新上传</span>
								</view>
								
								<view @click="agency" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									代收贷款</view>
								<view @click="salesReturn" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									退货</view>
							</view>
						</view> -->
						<!--退货-->
						<!--完成(230)-->
						<!-- <view v-else-if="formData.status==230"
							style="background-color: #ffffff;z-index: 1;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
							<view
								style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
								<view @click="salesReturn" hover-class="buttonHover"
									style="height: 30px;background-color: #bf5f09;color: #ffffff;width: 85px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
									退货</view>
							</view>
						</view> -->
					</view>
					<!-- <view v-else-if="index_==1">
						
									</view> -->
					<view v-else-if="index_==1">
						<!--运输跟踪-->
						<!-- <TransportTrack :data="formData" :scheduleId="formData.scheduleVo?formData.scheduleVo.scheduleId:''" ref="transportTrack"/> -->
						<view @click="goTransportTrack" hover-class="buttonHover" style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
							<view style="display: flex;justify-content: space-between;">查看运输跟踪<uni-icons type="right" size="16" color="#8f939c"></uni-icons></view>
							<image src="../../../static/waybill/trackBG.png" style="height: 280px;width: 300px;display: block;margin: 0 auto;"></image>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!--更多的操作-->
			<swiper-item v-for="(item,index) in moreItemArr" :key="'item'+index">
				<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<view v-if="index===0">
						<DispatchLog :scheduleId="scheduleId" ref="dispatchLog"/>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 顶部操作弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @maskClick="closeToggle">
			<view style="margin-top: 40px;border-radius: 20px;">
				<view style="display: flex;flex-wrap: wrap;margin: 0 auto;width: 100%;">
					<view v-for="(item,index) in moreItemArr" :key="index">
						<view @click="clickMoreItem(index)"
							style="width: 75px;height: 30px;display: flex;justify-content: center;align-items: center;margin: 10px;">
							<view :class="{'active':(index+1)==tabIndex}">
								{{item}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!--弹窗组件-->
		<Pick ref="pick" :data="formData" :data_pickup="formData_pickup" :waybillId="formData.waybillId" :carType_="carType_"/>
		<!-- <Dispatch  ref="dispatch" :data="formData" :waybillId="formData.waybillId" :carType_="carType_"/> -->
		<Depart ref="depart" :data="formData" :carType_="carType_"/>
		<Arrive ref="arrive" :data="formData" :carType_="carType_"/>
		<!-- <Unload ref="unload" :data="formData" :waybillId="formData.waybillId" />
		<Sign ref="sign" :data="formData" :waybillId="formData.waybillId" />
		<UploadReceipt ref="uploadReceipt" :data="formData" />
		<CompleteDispatch ref="completeDispatch" :data="formData" /> -->
	</div>
</template>

<script>
	import {
		getDispatchCarDetails
	} from '@/api/system/dispatch.js'
	import {
		getWayBillDetails,
		updateWayBillPickup,
		putWayBillStatus,
		putScheduleStatus,
		waybillTruckLoading,
		cancelWaybillTruckLoading,
		waybillDepart,
		cancelWaybillDepart,
		waybillArrive,
		cancelWaybillArrive,
		uploadReceipt,
		signWaybill,
		deleteSignWaybill,
		completeWaybill,
		updateWayBillProfile
	} from '@/api/system/waybill.js'

	import {
		getDicts
	} from '@/api/system/dict.js'
	
	import {getCarrierCarList} from '@/api/system/driver.js'

	import myfilepicker from '@/components/uploadFile/uploadFile.vue'

	import Pick from '@/pages/operation/waybillDetails/components/pick.vue'
	import Dispatch from '@/pages/operation/waybillDetails/components/dispatch.vue'
	import Depart from '@/pages/operation/waybillDetails/components/depart.vue'
	import Arrive from '@/pages/operation/waybillDetails/components/arrive.vue'
	import Unload from '@/pages/operation/waybillDetails/components/unload.vue'
	import Sign from '@/pages/operation/waybillDetails/components/sign.vue'
	import UploadReceipt from '@/pages/operation/waybillDetails/components/uploadReceipt.vue'
	import CompleteDispatch from './components/completeDispatch.vue'
	import TransportTrack from '@/pages/operation/dispatchDetails/transportTrack.vue'
	import DispatchLog from '@/pages/operation/dispatchDetails/dispatchLog.vue'
	
	export default {
		components: {
			myfilepicker,
			Pick,
			Dispatch,
			Depart,
			Arrive,
			Unload,
			Sign,
			UploadReceipt,
			CompleteDispatch,
			TransportTrack,
			DispatchLog
		},
		data() {
			return {
				//itemsArr: ['车次信息', '运输跟踪'],
				itemsArr: ['车次信息'],
				//itemsArr: ['车次信息', '车载监控'],
				// moreItemArr: ['异常预警', '回单跟踪', '中转信息', '装卸货人', '运单评价', '投保信息', '异常登记', '运单异动', '运单日志', '送货信息', '签收信息'],
				//moreItemArr: [ '回单跟踪',   '运单评价', '运单日志',  '签收信息'],
				moreItemArr: ['车次日志'],
				tabIndex: 0,
				scrollH: 700,
				scrollInto: '',
				openMore: true,
				dispatchCarDetails: {
					scheduleNo:'',
					carVo:{},
					carrierVo:{},
					driverVo:{},
					feeList:[],
					lineVo:{}
				}, 
				//运单详情
				formData: {
					scheduleVo:{
						scheduleNo:'',
						carVo:{},
						carrierVo:{},
						driverVo:{},
						feeList:[],
						lineVo:{}
					},
					scheduleNo:'',
					outboundAttach:'',
					billAttach:''
				},
				//提货
				formData_pickup: {},
				//车头
				headType: [],

				//下拉框 ->所属客户
				type: [],
				//下拉框 ->车型
				carType: [],
				carType_: [],
				//运单类型
				waybillType: [],
				//运单状态
				status: [],
				//货物类型
				goodsType: [],
				//包装类型
				packingType: [],
				//下拉框->车牌号
				plateNumber:[],
				//计费方式->下拉框
				feeMode: [],
				//车辆调度状态
				scheduleStatus:[],

				scheduleId: '',
				//当前车次详情展示运单序号
				whatWaybill_index:0,
				
				outboundAttach:'',
				billAttach:''
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - 40;
				}
			});

			if (e.scheduleId) {
				uni.showLoading({
					title: '正在加载',
				})
				this.scheduleId = e.scheduleId
				//获取车次详情
				getDispatchCarDetails(e.scheduleId).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.dispatchCarDetails = res.data
						this.formData = this.dispatchCarDetails.waybillList[0] || {} //初始化第一个
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		},
		created() {
			//加载运单类型
			getDicts('waybill_type').then(res => {
				res.data.forEach(item => {
					this.waybillType[item.dictValue] = item.dictLabel
				})
			})
			//加载运单状态
			getDicts('waybill_status').then(res => {
				res.data.forEach(item => {
					this.status[item.dictValue] = item.dictLabel
				})
			})
			//加载货物类型
			getDicts('goods_type').then(res => {
				res.data.forEach(item => {
					this.goodsType[item.dictValue] = item.dictLabel
				})
			})
			//加载包装类型
			getDicts('packing_type').then(res => {
				res.data.forEach(item => {
					this.packingType[item.dictValue] = item.dictLabel
				})
			})
			//车型
			getDicts('car_type').then(res => {
				this.carType = res.data.map(item => {
					return {
						value: item.dictValue,
						text: item.dictLabel
					}
				})
				res.data.forEach(item => {
					this.carType_[item.dictValue] = item.dictLabel
				})
			})
			//加载车头状态
			getDicts('head_type').then(res => {
				res.data.forEach(item => {
					this.headType[item.dictValue] = item.dictLabel
				})
			})
			//加载车次调度状态
			getDicts('flow_status').then(res=>{
				res.data.forEach(item=>{
					this.scheduleStatus[item.dictValue]=item.dictLabel
				})
			})
		},
		methods: {
			async init() {
				//获取车次详情
				await getDispatchCarDetails(this.scheduleId).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.dispatchCarDetails = res.data
						this.formData = this.dispatchCarDetails.waybillList[this.whatWaybill_index] || {} //初始化第一个
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//切换运单
			switchWaybill(){
				if(this.whatWaybill_index>=this.dispatchCarDetails.waybillList.length-1)
				{
					this.whatWaybill_index=0;
				}
				else
				{
					this.whatWaybill_index++;
				}
				this.formData = this.dispatchCarDetails.waybillList[this.whatWaybill_index] || {} //初始化运单列表
			},
			//接受提交后跳转的顶部导航栏位置
			otherFun() {
				this.init()
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				switch (index){
					case 1:
						//跳转单独页面
						// uni.navigateTo({
						// 	url:'/pages/operation/dispatchDetails/transportTrack?data='+JSON.stringify(this.formData)+'&scheduleId='+(this.formData.scheduleVo?this.formData.scheduleVo.scheduleId:'')
						// })
						//this.$refs.transportTrack[0].getLanLatInit()
						break;
					case 2:
						this.$refs.dispatchLog[0].getList()
						break;
					default:
						break;
				}
				this.tabIndex = index;
				// 滚动到指定元素
				this.scrollInto = 'tab' + index;
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title: '正在加载',
				})
				setTimeout(function() {
					uni.hideLoading()
				}, 500);
				this.changeTab(e.detail.current);
			},
			//点击更多
			openToggle() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('top')
				this.openMore = false
			},
			//关闭更多
			closeToggle() {
				this.$refs.popup.close()
				this.openMore = true
			},
			goTransportTrack(){
				//跳转单独页面
				uni.navigateTo({
					url:'/pages/operation/dispatchDetails/transportTrack?data='+JSON.stringify(this.formData)+'&scheduleId='+(this.formData.scheduleVo?this.formData.scheduleVo.scheduleId:'')
				})
			},
			//点击更多里的子项
			clickMoreItem(index) {
				switch (index){
					case 0:
						this.$refs.dispatchLog[0].getList()
						break;
					default:
						break;
				}
				index += 1;
				this.tabIndex = index
			},
			//编辑车次信息
			editDispatch(){
				//400 已调度 410已发车  430已完成
				if(this.dispatchCarDetails.flowStatus==410)
				{
					uni.showToast({
						icon:'none',
						title:'当前车次已发车，无法编辑'
					})
				}
				else if(this.dispatchCarDetails.flowStatus==420)
				{
					uni.showToast({
						icon:'none',
						title:'当前车次已到达，无法编辑'
					})
				}
				else if(this.dispatchCarDetails.flowStatus==430)
				{
					uni.showToast({
						icon:'none',
						title:'当前车次已完成，无法编辑'
					})
				}
				else if(this.dispatchCarDetails.flowStatus==440)
				{
					uni.showToast({
						icon:'none',
						title:'当前车次已取消，无法编辑'
					})
				}
				else
				{
					uni.navigateTo({
						url:'/pages/operation/dispatchDetails/updateDispatch?scheduleId='+this.dispatchCarDetails.scheduleId
					})
				}
				
			},
			//手动关闭dialog
			closeDialog(name){
				this.$refs[name].close()
			},
			//完成提货
			completePick(){
				this.$refs.pick.completePick()
			},
			//取消提货
			canclePick(){
				this.$refs.pick.canclePick()
			},
			//装车
			truckLoading() {
				this.$refs.truckLoading.truckLoading()
			},
			//取消装车
			cancleTruckLoading() {
				this.$refs.truckLoading.cancleTruckLoading()
			},
			//发车
			depart(){
				this.$refs.depart.depart()
			},
			//取消发车
			cancleDepart() {
				this.$refs.depart.cancleDepart()
			},
			//到达
			arrive() {
				this.$refs.arrive.arrive()
			},
			//取消到达
			cancleArrive() {
				this.$refs.arrive.cancleArrive()
			},
			//签收
			signIn() {
				this.$refs.sign.signIn()
			},
			//取消签收
			cancelSignIn(){
				this.$refs.sign.cancelSignIn()
			},
			//卸车
			unload() {
				this.$refs.unload.unload()
			},
			//取消卸车
			cancelUnload() {
				this.$refs.unload.cancelUnload()
			},
			//代收贷款
			agency() {

			},
			//上传回单
			uploadReceipt() {
				this.$refs.uploadReceipt.uploadReceipt()
			},
			//完成车次
			completeWaybill(){
				this.$refs.completeDispatch.completeWaybill()
			},
			//退货
			salesReturn() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否跳转退货运单页面填写退货详情？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在跳转...',
							})

							setTimeout(() => {
								uni.navigateTo({
									url: '/pages-operation/operation/addReturnWaybill/addReturnWaybill?waybillId='+that.formData.waybillId
								})
							}, 1000)
						}
					}
				});
			},

		},
	}
</script>

<style scoped>
	.pagecontrol-top-scroll {
		height: 40px;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		border-bottom: 1rpx solid #ededed;
		background-color: #f8f8f8;
		position: relative;
		z-index: 999;
	}

	.pagecontrol-top-title {

		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.pagecontrol-top-text {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.pagecontrol-top-normal {
		color: #656565;
		font-size: 16px;
	}

	.pagecontrol-top-selected {
		color: #000000;
		font-weight: bold;
		font-size: 16px;
	}

	.pagecontrol-bottom-line {
		width: 30vw;
		/* width: 16vw; */
		height: 3px;
		margin-top: 8px;
		background-color: #bf5f09;
		border-radius: 11px;
	}

	.pagecontrol-bottom-line-show {
		visibility: visible;
	}

	.pagecontrol-bottom-line-visibility {
		visibility: hidden;
	}

	.buttonHover {
		opacity: 0.6;
	}

	.active {
		border-radius: 8px;
		border: 1px solid #bf5f09;
		color: #bf5f09;
		padding: 4px 8px;
	}

	.contract::after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: 190px;
		border-right: 3px solid transparent;
		border-bottom: 30px solid transparent;
		border-left: 16px solid #d9d9d9;
	}

	::v-deep .uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
		background-color: rgb(157, 81, 38);
		border-radius: 0 0 11px 0;
		/* color: white; */
	}

	::v-deep .uni-button-color {
		color: #ffffff;
	}

	::v-deep .file-title {
		font-size: 12px;
		color: #333;
	}
</style>